import React from 'react';
import { inject, observer } from "mobx-react";
import { toJS } from 'mobx';
// import ReactDOM from "react-dom";

import {WeaRadioGroup,WeaTop,WeaEchart,WeaTab,WeaTable} from 'ecCom'
import {Button,Pagination} from 'antd'

const config = [
  {
    label: '联动类型',
    options: [
      {key:'0',showname:'全部'},
      {key:'1',showname:'今天', selected: true},
      {key:'2',showname:'本周'},
      {key:'3',showname: '时间'},
      {key:'5',showname:'本年'},
      {key:'7',showname:'上个月'},
      {key:'8',showname:'数值区间'},
      {key:'6',showname:'指定日期范围'},
    ],
    domkey: ['dateFrom'],
    selectLinkageDatas: {
      '1': {
        conditionType: 'INPUT',
        domkey: ['INPUT'],
      },
      '3': {
        conditionType: 'DATEPICKER',
        domkey: ['INPUT111111121'],
        viewAttr: 3,
        format: 'YYYY',
      },
      '2': {
        conditionType: 'CHECKBOX',
        domkey: ['CHECKBOX'],
      },
      '8': {
        conditionType: 'SCOPE',
        domkey: ['CHECKBOX1', 'CHECKBOX2'],
      },
      '6': {
        conditionType: 'RANGEPICKER',
        domkey: ['start', 'end'],
      }
    },
    labelcol: 6,
    fieldcol: 18,
  },
  {
    label: '不联动类型',
    options: [
      {key:'0',showname:'全部', selected: true},
      {key:'1',showname:'外勤签到'},
      {key:'2',showname:'考勤签到/签退'},
    ],
    domkey: ['checking'],
    labelcol: 6,
    fieldcol: 18,
  },
  {
    label: '只读类型',
    viewAttr: '1',
    options: [
      {key:'0',showname:'全部'},
      {key:'1',showname:'外勤签到'},
      {key:'2',showname:'考勤签到/签退'},
    ],
    labelcol: 6,
    fieldcol: 18,
  },
  {
    label: '自定义类型',
    com: <div>自定义组件<Button>自定义</Button></div>,
    labelcol: 6,
    fieldcol: 18,
  }
]

const btns = [
  <Button type='primary'>删除</Button>,
  <Button type='ghost'>全部已读</Button>,
];

const categories = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
const series = [0.5, 2, 0.43, 3.4, 4, 0];

let topTab = [
  {
    color: '#000000',
    groupid: 'flowAll',
    showcount: true,
    title: '图表',
    viewcondition: 0
  },
  {
    color: '#ff3232',
    groupid: 'flowNew',
    showcount: true,
    title: '报表',
    viewcondition: 1
  }
];

const dataSource = [{
  key: '1',
  title: '主题1',
  username: '曹云',
  projectName: '项目1',
}, {
  key: '2',
  title: '主题2',
  username: '曹云',
  projectName: '项目2'
}];

const columns = [{
  // title: '主题1',
  title: '主题',
  dataIndex: 'ec_name',
  key: 'ec_name',
  width: "30%",
  sorter: true,
}, {
  title: '负责人',
  className: "column-text-center",
  dataIndex: 'username',
  key: 'username',
  width: "20%",
  sorter: true
}, {
  title: '相关项目',
  dataIndex: 'projectName',
  key: 'projectName',
  width: "20%",
  className: "column-text-right",
}, {
  title: '相关客户',
  dataIndex: 'customer',
  key: 'customer',
  width: "10%",
}, {
  title: '公开',
  dataIndex: 'isPublic',
  key: 'isPublic',
  width: "10%",
}, {
  title: '时间',
  dataIndex: 'datetime',
  key: 'datetime',
  width: "10%",
}];

@inject('demo')
@observer
class Report extends React.Component {
  componentDidMount() {
    const {demo} = this.props;
    demo.callReportData();
  }
  render() {
    const {demo} = this.props;
    const data = demo.reportDatas?toJS(demo.reportDatas):[];
    const datas = [data];
    console.log('datas:',datas);
    return (
      <div>
        <WeaTop
          title={<span>XXX报表</span>}
          icon={<i className='icon-portal-workflow' />}
          iconBgcolor='#55D2D4'
          buttons={btns}>
          <div style={{padding:10}}>
            <WeaRadioGroup config={config}
                           onChange={(params)=> {
                             console.log('params', params);
                           }}/>
            <div style={{marginTop:10}}>
              <WeaTab
                datas={topTab}
                keyParam="viewcondition"  //主键
                countParam="groupid" //数量
                selectedKey={demo.selectedKey}
                onChange={v => {
                  demo.changeSelectdKey(v);
                }}
                />
              {demo.selectedKey==0 && (
              <div style={{marginTop:10,height:400}}>
                <WeaEchart ref="chart2"
                           categories={categories}
                           series={series} />
              </div>)}
              {demo.selectedKey==1 && (
                <div style={{marginTop:10}}>
                  <WeaTable
                    pagination={{
                      total:10000
                    }}
                    columns={columns}
                    dataSource={datas}
                    draggable={true} />
                </div>
              )}
            </div>
          </div>
        </WeaTop>
      </div>
    )
  }
}

export default Report;
